<nz-card class="m-b-2">
    <!-- seach START -->
    <div class="seach-wrap">
        <div class="seach-lf">
            <button nz-button nzType="primary" [routerLink]="['../goodsSpenarrSave', 0]" *ngIf="permission.userPermission.has('goods:goodsSpenarr:add')">新增规格组</button>
        </div>

        <div class="seach-rt">
            <input type="text" nz-input placeholder="请输入名称或备注" [(ngModel)]="queryForm.name" />

            <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
            <button nz-button nzType="default" (click)="backList()">重置</button>
        </div>
    </div>
    <!-- seach END -->
</nz-card>

<nz-card>
    <!-- Tabel -->
    <main class="pagination-wrap-position">
        <div class="table-wrap">
            <nz-table
                #basicTable
                nzSize="small"
                nzShowSizeChanger
                nzShowQuickJumper
                nzOuterBordered
                [nzScroll]="{ x: '1100px' }"
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzLoading]="tableLoading"
                [nzData]="listOfData?.records"
                [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
                [nzTotal]="listOfData?.total"
                [nzPageIndex]="listOfData?.current"
                [nzPageSize]="listOfData?.size"
                [nzShowTotal]="totalTemplate"
                (nzPageIndexChange)="onPageIndexChange($event)"
                (nzPageSizeChange)="onPageSizeChange($event)"
            >
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="110px" nzLeft>ID</th>
                        <th nzAlign="center" nzWidth="150px">图片</th>
                        <th nzAlign="center" nzWidth="280px">名称</th>
                        <th nzAlign="center" nzWidth="150px">规格数</th>
                        <th nzAlign="center" nzWidth="150px">已绑定</th>
                        <th nzAlign="center" nzWidth="150px">已上架</th>
                        <th nzAlign="center" nzWidth="150px">已下架</th>
                        <th nzAlign="center" nzWidth="150px">B端商品</th>
                        <th nzAlign="center" nzWidth="150px">C端商品</th>
                        <th nzAlign="center" nzWidth="250px">备注</th>
                        <th nzAlign="center" nzWidth="240px" nzRight>操作</th>
                    </tr>
                </thead>
      
                <tbody>
                    <tr *ngIf="searchHint && listOfData?.records">
                        <td class="result-wrap" nzAlign="center" colspan="11">
                            <span>搜索 “{{ searcName }}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
                            <a nz-button nzType="link" (click)="backList()">返回原列表</a>
                        </td>
                    </tr>
                    <tr *ngFor="let data of basicTable.data; let index = index;">
                        <!-- id -->
                        <td nzAlign="center" nzLeft>{{ data.id }}</td>
                        <!-- 图片 -->
                        <td nzAlign="center">
                            <img width="34" height="34" nz-image [nzSrc]="data.icon" [nzFallback]="fallback" />
                        </td>
                        <!-- 名称 -->
                        <td nzAlign="center" nzBreakWord>{{ data.name }}</td>
                        <!-- 规格数 -->
                        <td nzAlign="center">{{ data.count }}</td>
                        <!-- 已绑定 -->
                        <td nzAlign="center">{{ data.goodsCount }}</td>
                        <!-- 已上架 -->
                        <td nzAlign="center">
                            <span class="mcolor-green">{{ data.goodsPutCount }}</span>
                        </td>
                        <!-- 已下架 -->
                        <td nzAlign="center">
                            <span class="mcolor-red">{{ (data.goodsCount - data.goodsPutCount) }}</span>
                        </td>
                        <!-- B端商品 -->
                        <td nzAlign="center">{{ data.goodsCountB }}</td>
                        <!-- C端商品 -->
                        <td nzAlign="center">{{ data.goodsCountC }}</td>
                        <!-- 备注 -->
                        <td nzAlign="center" nzBreakWord>{{ data.note ? data.note : '-' }}</td>
                        <!-- 操作 -->
                        <td nzAlign="center" nzRight>
                            <a
                                *ngIf="permission.userPermission.has('goods:goodsSpenarr:edit')"
                                nz-button
                                nzType="link"
                                [routerLink]="['../goodsSpenarrSave', data.id]">
                                编辑
                            </a>
                            <a
                                *ngIf="permission.userPermission.has('goods:goodsSpenarr:delete')"
                                nz-button
                                nzType="link"
                                nzDanger
                                nz-popconfirm
                                nzPopconfirmTitle="确认删除吗?"
                                [nzIcon]="iconTpl"
                                (nzOnConfirm)="confirm(data.id)">
                                删除
                            </a>
                            <ng-template #iconTpl>
                                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                            </ng-template>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
      
            <!-- 分页template -->
            <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
        </div>
    </main>
</nz-card>
